<template>
  <div>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <Nav message="-1" />

    <van-tabs v-model="active" animated color="rosybrown">
      <van-tab
        v-for="(item, index) in tabsTitle"
        :key="index"
        :title="item.title"
      >
        <div style="padding: 2rem">
          <van-form
            validate-first
            @failed="onFailed"
            @submit="onSubmit(item.name)"
          >
            <van-field
              v-model="signInInfo.buyerEmail"
              name="pattern"
              placeholder=""
              :rules="[{ pattern }]"
              left-icon="envelop-o"
              style="border: solid #999 1px"
              :border="false"
            />

            <van-field
              v-model="signInInfo.buyerPassword"
              type="password"
              left-icon="lock"
              style="border: solid #999 1px; margin: 1rem 0"
              :border="false"
              name="validator"
              placeholder=""
              :rules="[{ validator }]"
            />

            <van-button
              block
              native-type="submit"
              style="border: solid #999 1px"
            >
              {{ item.title }}
            </van-button>
          </van-form>
        </div>

        <!-- qq登录 -->
        <img
          src="static/Connect_logo_5.png"
          v-if="item.title == '登录'"
          @click="skipQQLogin"
        />
      </van-tab>
    </van-tabs>
    <br />
    <!--微信公众号登录 -->
    <div id="wxLogin">微信关注公众号登录</div>
    <div id="wxQRcode">
      <img style="width: 75%" :src="wxUrl" />
    </div>
    <van-popup
      style="
        height: 5rem;
        width: 20rem;
        line-height: 5rem;
        font-weight: 600;
        color: rosybrown;
        font-size: 1rem;
      "
      v-model="showInputErrer"
      >{{ this.signInErrerInfo }}</van-popup
    >
  </div>
</template>
<script>
import Nav from "@/components/Nav.vue";
import { Toast } from "vant";
export default {
  components: {
    Nav,
  },
  created() {
    let data = this.$route.query.item;
    console.log("登录页面收到的路径：" + data);

    //获取微信二维码
    const _this = this;
    axios.get(this.$api + "wx/getQRcode").then(function (resp) {
      console.log(resp);
      _this.wxTicket = resp.data.ticket; //验证是否扫码的秘钥
      _this.wxUrl = resp.data.url; //二维码链接
    });
    this.xunhuan(); //循环执行
  },
  data() {
    return {
      wxUrl: "",
      wxTicket: "",
      QRcodeImg: "",
      pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
      passwordRule: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/,
      active: 0,
      tabsTitle: [
        {
          title: "登录",
          name: "login",
        },
        {
          title: "注册",
          name: "signIn",
        },
      ],
      showInputErrer: false,
      signInErrerInfo: "",
      signInInfo: {
        buyerEmail: null,
        buyerPassword: null,
      },
      //登录成功后跳转回原来的路径
      loginOkUrl: null,
    };
  },
  methods: {
    xunhuan() {
      this.timer = setInterval(this.wxIsScan, 1000); //循环执行
    },
    wxIsScan() {
      const _this = this;
      axios
        .get(this.$api + "wx/isScan", {
          params: {
            ticket: _this.wxTicket,
          },
        })
        .then((result) => {
          console.log("发送一次请求");
          console.log(result);
          if (result.data.code == 0) {
            console.log("扫码成功");
            //销毁定时器循环
            clearInterval(_this.timer);
            //跳转首页
            _this.$cookie.set("shoptoken", result.data.jwtToken, {
              expires: 1,
              domain: "localhost",
            });
            _this.$cookie.set("shoptoken", result.data.jwtToken, {
              expires: 1,
              domain: ".liuzhuangzhuang1993.cn",
            });
            _this.$router.push("/");
          }
        });

      // .catch((err) => {
      //   console.log("catch方法报错");
      // });
    },
    skipQQLogin() {
      // window.location = 'https://www.mobilestore.link/api/skipqq';
      window.location = this.$api + "api/skipqq";

      // const _this = this;
      // axios.get(this.$api + "api/skipqq").then(function (resp) {
      //   console.log("skipQQLogin()方法的回调");
      //   console.log(resp);
      // });
    },
    // wxLogin() {
    //   const _this = this;
    //   axios.get(this.$api + "ucenter/wx/QRcode").then(function (resp) {
    //     console.log(resp.data);
    //     _this.QRcodeImg = resp.data;
    //   });
    // },

    // 不符合规则时触发
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
      if (
        this.signInInfo.buyerEmail == "" &&
        this.signInInfo.buyerPassword == ""
      ) {
        this.signInErrerInfo = "请输入邮箱和密码";
      } else if (this.signInInfo.buyerEmail == "") {
        this.signInErrerInfo = "请输入邮箱";
      } else if (this.signInInfo.buyerPassword == "") {
        this.signInErrerInfo = "请输入密码";
      } else if (!this.pattern.test(this.signInInfo.buyerEmail)) {
        this.signInErrerInfo = "请输入正确邮箱";
      } else if (!this.passwordRule.test(this.signInInfo.buyerPassword)) {
        this.signInErrerInfo = "密码至少包含 数字和英文 长度6-20";
      } else {
        this.signInErrerInfo = "未知错误";
      }

      this.showInputErrer = true;
    },
    // 符合规则时触发
    onSubmit(type) {
      if (type == "signIn") {
        const _this = this;
        var signInInfoJSON = JSON.stringify(this.signInInfo);
        axios
          .post(this.$api + "member/signIn", signInInfoJSON, {
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
            },
          })
          .then(function (resp) {
            console.log(resp);
            if (resp.data.code == 1) {
              _this.signInErrerInfo = resp.data.msg;
            } else if (resp.data.code == 0) {
              _this.signInErrerInfo = "注册成功！已跳转到登录页面";
              _this.active = 0;
            }
            _this.showInputErrer = true;
          });
      } else if (type == "login") {
        const _this = this;
        var signInInfoJSON = JSON.stringify(this.signInInfo);
        axios
          .post(this.$api + "member/login", signInInfoJSON, {
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
            },
          })
          .then(function (resp) {
            console.log(resp);
            if (resp.data.code == 1) {
              _this.signInErrerInfo = resp.data.msg;
            } else if (resp.data.code == 0) {
              _this.signInErrerInfo = "登录成功！";
              _this.$cookie.set("shoptoken", resp.data.data, {
                expires: 1,
                domain: "utools.club",
              });
              _this.$cookie.set("shoptoken", resp.data.data, {
                expires: 1,
                domain: "localhost",
              });
              _this.$cookie.set("shoptoken", resp.data.data, {
                expires: 1,
                domain: ".mobilestore.link",
              });
              _this.$cookie.set("shoptoken", resp.data.data, {
                expires: 1,
                domain: ".liuzhuangzhuang1993.cn",
              });
              _this.$cookie.set("shoptoken", resp.data.data, {
                expires: 1,
                domain: "39.107.249.74",
              });
              _this.$router.push("/");
            }
            _this.showInputErrer = true;
          });
      }
    },
    //密码函数校验
    validator(val) {
      return this.passwordRule.test(val);
    },
  },
};
</script>
<style scoped>
.wx {
  width: 30%;
  margin-top: 3.75rem;
  height: 3.75rem;
  border: green;
  background: rgb(113, 219, 113);
  font-weight: 900;
  color: #333;
}
#wxLogin {
  /* background-color: rgb(135, 240, 135); */
  border: 1px solid #555;
  height: 3rem;
  width: 14.3rem;
  margin: 0 auto;
  line-height: 3rem;
  font-size: 1.5rem;
  color: #555;
}
#wxQRcode {
  width: 14.3rem;
  height: 11rem;
  border: 1px solid #555;
  margin: 0 auto;
  border-top: none;
}
</style>